

@import './variable.scss';


.map-container {
  width: 100%;
  height: 100%;
  position: relative;

  #allmap {
    overflow: hidden;
    width: 100%;
    height: 100%;
    // z-index: inherit !important;
  }

  .drawing-tools{
    position: absolute;
    top: px(10);
    right: 95px;
    height: px(45);
    display: flex;
    flex-wrap: nowrap;
    border-radius: px(5);
    background-color: #fff;
    font-size: px(14);

    .drawing-tools-dropdown{
      height: 100%;
    }

    .drawing-tools-item{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-right: 1px solid #d2d2d2;
      color: #808080;
      height: 100%;
      width: px(50);
      padding: 0 px(5);
      cursor: pointer;
      &:hover{
        background-color: #dcecf9;
      }
      &.last{
        border-right: 0;
      }
      img{
        width: px(14);
        height: px(14);
      }
      span{
        // font-size: px(14);
      }
    }
    .drawing-tools-dropdown.is-active,
    .drawing-tools-item.is-active{
      background-color: #c7e8ff;
    }
  }

  .overlay-tools{
    position: absolute;
    bottom: px(10);
    left: 50%;
    transform: translate(-50%);
    background-color: #fff;

    ::v-deep .el-checkbox-button{
      margin-right: 0.5px;

      &.is-hidden{
        display: none;
      }

      .el-checkbox-button__inner{
        border: px(3) solid rgba(rgb(129, 120, 120), .7);
        font-size: px(12);
        padding: px(2) px(8);
        color:#609ffa;
        width: px(60);
        min-width: 50px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .svg-icon{
        width: px(25);
        height: px(25);
        margin-bottom: px(2);
      }

      &.is-checked{
        .el-checkbox-button__inner{
          background-color:#609ffa;
          color:#fff;
        }
      }
    }
    .el-checkbox-group{
      border-radius: px(5);
    }
  }
  
  .left-panel {
    cursor: default;
    position: absolute;
    top: px(10);
    left: px(20);
    background-color: #ffffff;
    border-radius: px(5);
    border: 1px solid #c0c0c0;
    width: px(320);

    .nav {
      display: flex;
      align-items: center;
      height: px(36);
      .nav-btn {
        width: px(60);
        height: px(36);
        text-align: center;
        line-height: px(36);
        color: #8e8e8e;
        cursor: pointer;

        
      }
    
      .searchbox-text {
        flex: 1;
        color: #bbbbbb;
        border: none;
        ::v-deep .el-input__inner{
          height: px(28);
          line-height: px(28);
          font-size: px(14);
        }
        ::v-deep .el-input__icon{
          height: px(28);
          line-height: px(28);
          width: px(25);
          font-size: px(14);
        }
      }

    }

    .divider {
      height: px(2);
      background-color: #0099ff;
    }

    .content {
      height: px(540);
      width: 100%;
      opacity: 0.92;
      font-size: px(16);

      .content-tabs {
        height: 100%;
        width: 100%;

        .el-tabs {
          height: 100%;
          border: 0;

          ::v-deep .el-tabs__header {
            width: px(60);
            margin-right: 0;
          }

          ::v-deep .el-tabs__content {
            padding: px(10) 0 0 0;
            height: 100%;

            .el-tab-pane {
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: flex-end;
            }
          }

          ::v-deep .el-tabs__item.is-left {
            height: px(70);
            padding: 0;
            font-size: px(14);
          }

          .tab-pane-item {
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            height: 100%;

            .svg-icon {
              width: px(30);
              height: px(30);
            }

            span {
              height: px(20);
              line-height: px(20);
              color: #000;
            }
          }

          .default-scrollbar {
            width: 100%;
            // height: calc(100% - #{px(50)});
            flex: 1;
          }

          ::v-deep .default-scrollbar__wrap {
            width: auto;
            // height: 110%;
            overflow-x: hidden;
          }

          .el-tree {
            color: #000;

            ::v-deep .el-tree__empty-text{
              font-size: px(16);
            }

            ::v-deep .el-tree-node.is-current>.el-tree-node__content {
              background-color: #6bb5e6;
              color: #ffffff;
              .parent-span{
                color: #ffffff;
              }
            }
            ::v-deep .el-tree-node__content{
              height: px(26);
              line-height: px(26);
              width: 100%;
              display: flex;
              flex-direction: row;
              &:hover {
                background-color: #bfe3ef;
              }

              &>.el-tree-node__expand-icon{
                padding: px(2);
                font-size: px(14);
              }
              &>label.el-checkbox{
                margin-right: px(5);
                font-size: px(14);
              }
              .el-checkbox__inner{
                width: px(14);
                height: px(14);
                border: 1px solid #9b9da2;
                &::before{
                  height: px(2);
                  top: px(5);
                }
                &::after{
                  height: px(7);
                  left: px(4);
                  top: px(1);
                }
              }
            }

            .custom-tree-node {
              height: px(26);
              display: flex;
              flex: 1;
              align-items: center;
              justify-content: space-between;
              padding-right: px(8);

              .custom-node-label{
                max-width: px(100);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap; 
              }

              .parent-span {
                color: #0099ff;
              }

              .mark-button {
                color: #0099ff;
                font-size: px(12);

                &:hover {
                  color: #ffffff;
                  cursor: crosshair;
                }
              }
            }
          }

          .tabs-footer {
            height: px(40);
            display: flex;
            justify-content: flex-end;
            align-items: center;

            .tools-btn {
              margin-right: px(5);
              display: flex;
              align-items: center;
              .el-tooltip{
                cursor: pointer;
                margin: 0 px(5);
              }
              img{
                width: px(25);
                height: px(25);
                background-color: #6bb5e6;
                border-radius: 50%;
                &:hover{
                  background-color: #0794f3;
                }
              }
            }
            // .el-button {
            //   height: px(28);
            //   font-size: px(12);
            //   border: 1px solid rgba(gray, 0.8);
            //   border-radius: px(5);
            //   padding: 0 px(10);
            // }
          }
        }
      }

      .content-location {
        height: 100%;
        width: 100%;

        .location-query {
          margin: px(3) px(5);
          overflow:hidden;
          ::v-deep .el-range-editor{
            width: 100%;
            height: px(28);
            margin: px(3) 0;
            .el-range-input{
              font-size: px(12);
            }
            .el-range__icon{
              font-size: px(12);
              line-height: px(20);
            }
            .el-range-separator{
              line-height: px(20);
              font-size: px(12);
              padding: 0 px(5);
            }
          }
          .query-btn{
            float: right;
            font-size: px(12);
            padding: px(7) px(15);
          }
        }

        ::v-deep .el-table {
          th,td{
            padding: px(8) 0 !important;
            font-size: px(12);
          }
          .el-table__empty-text{
            font-size: px(14)
          }
          .table-herder-custom {
            background-color: #8dbcee;
            color: #000;
          }

          .table-cell-custom{
            font-size: px(12) !important;
            div.cell{
              padding: 0 !important;
            }
          }
          .el-table__body tr.current-row>td {
            background-color: #d1ddea;
          }
        }
        ::v-deep .el-pagination.right{
          right: px(5);
        }
      }
    }

    .result-content {
      height: px(36);
      background-color: #eee7e7;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;

      .back-btn{
        font-size: px(14);
      }

      .right {
        height: 100%;
        display: flex;
        align-items: center;
        font-size: px(14);
        .label {
          color: #666666;
        }

        .svg-icon {
          width: px(18);
          height: px(18);
        }

        .total {
          margin-left: px(2);
          margin-right: px(10);
        }
      }
    }

    
  }

  

  .webrtc-video {
    position: absolute;
    right: 0;
    top: 0;
    width: px(480);
    height: px(270);
    border: 1px solid #6bb5e6;
    background-color: #000;

    .video_remote_div {
      width: 100%;
      height: 100%;
      position: relative;

      .video_local_div {
        width: px(160);
        height: px(90);
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }

    video {
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
  }


  ::v-deep .meeting-preview {
    width: 40%;
    height: 50%;
    background-color: #1a4969;

    .el-dialog__title,
    .el-dialog__close {
      color: #fff;
      font-size: px(20);
    }

    .el-dialog__header{
      padding: px(10) px(20);
    }

    .el-dialog__body {
      padding: px(10) px(20) 0;
      height: calc(100% - #{px(106)});
    }

    .preview-box {
      border: 1px solid #9b9797;
      height: 100%;
      margin: px(5);
    }

    .preview-item {
      min-height: px(50);
      margin: px(5);
      padding: 0 px(10);
      background-color: #1a4969;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid #0984d6;
      border-radius: px(3);

      &:hover {
        background-color: #718ea1;
      }

      .meeting-label {
        display: flex;
        align-items: center;

        img {
          height: px(30);
          width: px(30);
          margin-right: px(5);
        }
      }

      .meeting-info {
        span {
          display: inline-block;
          font-size: px(16);
        }

        .label {
          min-width: px(90);
        }

        .value {
          width: px(80);
        }
      }
    }

    .preview-item.isCurrent {
      background-color: #0984d6;
      border-color: #fff;
    }

    .el-dialog__footer {
      padding: 0 px(30) px(10);
    }

    .preview-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 px(10);
      margin-top: px(10);

      .el-button {
        width: px(70);
        height: px(30);
        line-height: px(30);
        padding: 0;
        background-color: #1a4969;
        color: #fff;
        font-size: px(18);
        border-radius: px(5);
        &:hover {
          background-color: #409eff;
        }
      }
    }

    .preview-inner-dialog {
      width: 40%;
      height: 50%;
      background-color: #1a4969;
      opacity: 0.98;

      .back-to-list {
        color: #fff;
        height: px(22);
        width: px(22);
        margin-left: px(20);
      }

      .el-form {
        padding: px(30);

        .el-form-item__error{
          font-size: px(14);
          line-height: px(20);
          padding: 0;
        }

        .el-form-item {
          margin-bottom: px(22);
          margin-right: px(10);
          display: flex;
          
          &__content {
            color: #fff;
            line-height: px(34);
            width: 100%;
          }
          &__label {
            line-height: px(32);
            font-size: px(16);
            color: #fff;
            min-width: px(120);
          }
        }

        .el-input__inner,
        .el-textarea__inner {
          width: px(220);
          height: px(32);
          line-height: px(32);
          background-color: #1a4969;
          border: 1px solid rgba(gray, 0.8);
          color: #fff;
          font-size: px(16);
          width: 100%;
        }

        .el-switch__label {
          color: #ffffff;

          &.is-active {
            color: #13ce66;
          }
        }
      }

      .preview-inner-footer {
        padding: 0 px(10);
        text-align: right;

        .el-button {
          width: px(70);
          height: px(30);
          line-height: px(30);
          padding: 0;
          background-color: #1a4969;
          color: #fff;
          font-size: px(14);
          border-radius: px(5);
          &:hover {
            background-color: #409eff;
          }
        }
      }
    }
  }

  ::v-deep .intercom-dialog {
    background-color: #1a4969;
    width: px(600);
    height: px(400);

    .el-dialog__header {
      padding: px(10) px(20);
      text-align: center;
      // background-color: #18659c;
      .el-icon-close,
      .el-dialog__title {
        color: #fff;
        font-size: px(18);
        line-height: px(24);
        height: px(24);
      }
    }

    .el-dialog__body {
      padding: px(10) px(20) 0;
      height: calc(100% - #{px(106)});

      .intercom-body {
        height: 100%;
        margin: px(5);
        border: 1px solid rgba(255, 255, 255, 0.6);
      }

      .outer-radio-group {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .el-radio {
          color: #fff;
          margin: px(10) px(5);
          height: px(32);
          line-height: px(32);
          font-size: px(14);
          .el-radio__inner{
            width: px(14);
            height: px(14);
            &::after{
              width: px(4);
              height: px(4);
            }
          }
          .el-radio__label{
            font-size: px(14);
          }
        }

        .temporary-span{
          margin-left: px(15);
        }

        .el-input-number {
          width: px(130);
          height: px(32);
          line-height: px(32);
          .el-input__inner {
            background-color: #507db4;
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.3);
            font-size: px(12);
            height: px(32);
          }

          .el-input-number__decrease,
          .el-input-number__increase {
            background-color: #c9d4e1;
            border-left: 1px solid rgba(255, 255, 255, 0.3);
            font-size: px(12);
            line-height: px(32);
            width: px(30);
            color: #000;
          }

          .el-icon-arrow-up,
          .el-icon-arrow-down {
            color: #fff;

            &:hover {
              color: #409eff;
            }
          }
        }

        .el-radio-button {
          margin-left: px(10);

          .el-radio-button__inner {
            background-color: #1a4969;
            color: #fff;
            height: px(30);
            line-height: px(30);
            padding: 0 px(3);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: px(5);
            font-size: px(10);
          }

          .el-radio-button__orig-radio:checked+.el-radio-button__inner {
            background-color: #0099ff;
          }
        }

        .inner-radio-group {
          .el-radio-button.is-active {
            .el-radio-button__inner {
              background-color: #0099ff;
            }
          }
        }
      }

      .el-divider--horizontal {
        margin: 0;
        background-color: #0099ff;
      }
    }

    .el-dialog__footer {
      padding: 0;
      position: absolute;
      bottom: px(15);
      right: px(25);
      .el-button {
        width: px(70);
        height: px(30);
        line-height: px(30);
        padding: 0;
        background-color: #1a4969;
        color: #fff;
        font-size: px(14);
        border-radius: px(5);
        &:hover {
          background-color: #409eff;
        }
      }
    }
  }

  .warning-box {
    cursor: default;
    position: absolute;
    right: px(10);
    top: px(70);
    width: px(300);
    // background-color: #fff;
    background: rgba(16, 27, 34, 0.8);
    border-radius: px(5);

    .title {
      font-style: oblique;
      color: #fff;
      font-size: px(14);
      background: rgba(0, 75, 123, 0.8);
      margin: px(5) px(10);
      height: px(20);
      line-height: px(20);
      display: flex;
      justify-content: space-between;

      .more {
        font-size: px(12);
        margin-right: px(5);
        cursor: pointer;
      }
    }


    .content {
      font-size: px(12);
      margin: px(5) px(10);

      li {
        color: #fff;
        margin-bottom: 5px;

        .mame {
          color: #00cdf5;
          font-weight: 800;
        }

        .air-type,.air-state {
          color: red;
          // background-color: rgb(173, 37, 37);
        }
      }
    }
  }
}



